﻿
<script type="text/javascript">

    var core = angular.module('skymate.core');

    core.controller('app.ui.modals.ctrl', [
        '$uibModal', '$log', function ($uibModal, $log) {
            var vm = this;

            vm.items = ['item1', 'item2', 'item3'];


            vm.open = function (size) {

                var modalInstance = $uibModal.open({
                    animation: true,
                    templateUrl: 'myModalContent.html',
                    controller: 'ModalInstanceCtrl',
                    size: size,
                    resolve: {
                        items: function() {
                            return vm.items;
                        }
                    }
                });

                modalInstance.result.then(function(selectedItem) {
                    //vm.selected = selectedItem;
                }, function() {
                    $log.info('Modal dismissed at: ' + new Date());
                });
            };

            return vm;
            /*var myModal = $modal({ title: 'My Title', content: 'My Content', show: true });
*/
/*

        var myAside = $aside({ title: 'My Title', content: 'My Content', show: true });
*/

        }
    ]);

</script>

<script type="text/javascript">
    
    angular.module('skymate.core').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

        $scope.items = items;
        $scope.selected = {
            item: $scope.items[0]
        };

        $scope.ok = function () {
            $uibModalInstance.close($scope.selected.item);
        };

        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    });

</script>

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
</script>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        Modals
        <small>new</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">UI</a></li>
        <li class="active">Modals</li>
    </ol>
</section>
<!-- Main content -->
<section class="content" ng-controller="app.ui.modals.ctrl as vm">
    <button type="button" class="btn btn-default" ng-click="vm.open()">Open me!</button>
    <button type="button" class="btn btn-default" ng-click="vm.open('lg')">Large modal</button>
    <button type="button" class="btn btn-default" ng-click="vm.open('sm')">Small modal</button>
</section><!-- /.content -->

